<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments::head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <title>Life Show后台</title>
</head>
<body>

<div id="contentWrap">
    <div th:replace="admin/_fragments::navbar(2)">
        <!--sidebar-->
        <div class="ui sidebar vertical left menu overlay borderless visible sidemunu inverted grey"
             style="max-width: 250px !important;" tabindex="0">
            <a href="#" class="item logo">
                <img src="../../static/images/logo.png" alt="admin logo">
            </a>
            <div class="ui accordion inverted">
                <a class="title item m-padded">
                    <i class="compass outline icon titleIcon"></i>
                    <p>首页</p>
                </a>
                <a class="title item m-padded">
                    <i class="video icon titleIcon"></i>
                    <p>短视频管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="user icon titleIcon"></i>
                    <p>用户管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="music icon titleIcon"></i>
                    <p>背景音乐管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="tags icon titleIcon"></i>
                    <p>热门活动管理</p>
                </a>
                <div class="title item m-padded toggle">
                    <i class="bell icon titleIcon"></i>
                    举报模块
                    <i class="dropdown icon" style="float: right !important;"></i>
                    <div class="ui red horizontal label">99+</div>
                </div>
                <div class="ui menu inverted m-item m-display-hide" style="border-radius: 0 !important;" tabindex="0">
                    <div class="ui fluid dropdown item" style="font-size: 14px !important;">
                        <a class="item" href="#">
                            <i class="lock open icon"
                               style="font-size: 12px !important;float: left !important;margin-right: 5px !important;"></i>
                            举报列表
                        </a>
                        <a class="item" href="#">
                            <i class="lock icon"
                               style="font-size: 12px !important;float: left !important;margin-right: 5px !important;"></i>
                            封禁列表
                        </a>
                    </div>
                </div>
                <div class="ui divider"></div>
                <a class="title item m-padded">
                    <i class="users icon titleIcon"></i>
                    <p>管理员管理</p>
                </a>
            </div>
        </div>

        <!--navbar-->
        <div class="navslide ui menu">
            <div class="right menu">
                <div class="ui dropdown item">
                    <i class="user circle icon"></i>
                    <span>admin</span> <i class="dropdown icon"></i>
                    <div class="menu">
                        <p class="item">超级管理员</p>
                    </div>
                </div>
            </div>
            <a class="item labeled">
                <i class="power icon"></i>注销
            </a>
        </div>
    </div>

    <div class="m-padded-none m-container-content-sp">
        <!--搜索-->
        <div class="ui horizontal inline segments form">
            <input type="hidden" name="page">
            <div class="ui segment">
                <div class="ui fields m-margin-tb-none">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div class="ui selection search dropdown activ">
                            <input type="hidden" th:value="*{activ}!=null?*{activ.id}" name="activ">
                            <i class="dropdown icon"></i>
                            <div class="default text">活动</div>
                            <div class="menu">
                                <div th:each="activ:${activs}" th:text="${activ.activName}" th:data-value="${activ.id}" class="item" data-value="1">美食</div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <button class="ui basic button" id="clear-btn">清空</button>
                    </div>
                    <div class="field">
                        <button class="ui teal basic button" id="search-btn"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
        </div>

        <!--短视频列表-->
        <div id="table-container">
            <table th:fragment="videoList" class="ui fixed single line celled teal table">
                <thead>
                <tr>
                    <th>#</th>
                    <th colspan="3">标题</th>
                    <th>封面图</th>
                    <th>活动</th>
                    <th colspan="3">描述</th>
                    <th colspan="2">上传时间</th>
                    <th>音乐ID</th>
                    <th colspan="2">体积</th>
                    <th colspan="2">上传用户</th>
                    <th>状态</th>
                    <th colspan="4">点赞/收藏/评论</th>
                    <th colspan="3">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="video : ${page.records}" th:classappend="${video.status}==1?'normalBackground':'exceptBackground'">
                    <td th:attr="data-content=${video.id}" th:text="${video.id}">1</td>
                    <td th:attr="data-content=${video.title}" colspan="3" th:text="${video.title}">标题名</td>
                    <td>
                        <img src="../../static/images/leaves-pattern.png" alt="" th:src="${video.cover}" class="ui avatar image">
                        <div class="ui flowing popup top left transition hidden">
                            <img src="../../static/images/leaves-pattern.png" alt="" th:src="${video.cover}">
                        </div>
                    </td>
                    <td th:attr="data-content=${video.activ}" th:text="${video.activ}">美食</td>
                    <td th:attr="data-content=${video.description}" colspan="3" th:text="${video.description}">这是一段描述</td>
                    <td colspan="2" th:text="${#dates.format(video.uploadDate,'yyyy-MM-dd')}">2020-02-11 11:11:11</td>
                    <td th:text="${video.bgmId}">5</td>
                    <td colspan="2" th:text="${video.size}">1m</td>
                    <td colspan="2" th:text="${video.author}">w_chao</td>
                    <td th:text="${video.status}==1?'正常':'被举报'">正常</td>
                    <td colspan="4" th:text="${video.stat}">1k/2/23/23/1</td>
                    <td colspan="3" class="m-overflow-visited">
                        <a href="#" class="ui icon mini blue button" th:href="${video.videoSrc}" target="_blank">播放&nbsp;&nbsp;<i class="play circle outline icon"></i></a>
                        <div class="ui dropdown item mini button"
                             style="padding-left: 10px !important;padding-right: 10px !important;">
                            更多
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <a href="#" class="item" th:href="@{/admin/video/delete/{id}(id=${video.id})}">删除</a>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="24">
                        <div class="ui mini pagination menu" th:if="${page.pages}>1">
                            <a href="#" class="icon item" onclick="page(this)"
                               th:attr="data-pages=${page.current}-1"
                               th:unless="${page.current}==1"><i class="angle double left icon"></i>&nbsp;&nbsp;&nbsp;上一页
                            </a>
                            <a href="#" class="icon item" onclick="page(this)"
                               th:attr="data-pages=${page.current}+1"
                               th:unless="${page.current==page.pages}">下一页&nbsp;&nbsp;&nbsp;<i
                                    class="angle double right icon"></i>
                            </a>
                        </div>
                    </th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<!--/*/<th:block th:replace="admin/_fragments::script">/*/-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="../../static/js/jquery-2.2.4.min.js"></script>
<script src="../../static/js/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $('.menu .toggle').click(function () {
        $('.m-item').toggleClass("m-display-hide");
    });

    $('.ui .dropdown').dropdown({
        on: "hover"
    });

    $('#clear-btn')
        .on('click', function () {
            $("[name='title']").val('');
            $('.activ').dropdown('clear');
        });

    $('td').popup();

    $('#search-btn').click(function () {
        $("[name='page']").val(1);
        loadData();
    });

    function page(obj) {
        $("[name='page']").val($(obj).data("pages"));
        loadData();
    }

    function loadData() {
        $("#table-container").load(/*[[@{/admin/video/search}]]*/"/admin/video/search", {
            title: $("[name='title']").val(),
            activId: $("[name='activ']").val(),
            pages: $("[name='page']").val()
        });
    }

    $('.image')
        .popup({
            inline: true
        });
</script>
</body>
</html>






































